import './index.css';
import './detail.less';
import { Layout, Breadcrumb, DatePicker, Form, Input, Button, Select, Table, Pagination } from 'antd';
import billStore from '../../store/billSrc';
import { observer } from 'mobx-react';
import React, { useState, useEffect } from 'react';
import http from '../../utils/http'

const { Content } = Layout;
function onChange(date, dateString) {
    console.log(date, dateString);
}
// 分页布局
function itemRender(current, type, originalElement) {
    if (type === 'prev') {
        return <a>上一页</a>;
    }
    if (type === 'next') {
        return <a>下一页</a>;
    }
    return originalElement;
}
function Detail(props) {
    // console.log('detail', props);
    billStore.setPathName(props.location.pathname);

    // const [form] = Form.useForm();
    // const [, forceUpdate] = useState({}); // To disable submit button at the beginning.
    // useEffect(() => {
    //     forceUpdate({});
    // }, []);
   

    const [form] = Form.useForm();

    // 表格
    const columns = [
        { title: '时间', dataIndex: 'orderTime', key: 'name' },
        { title: '订单号', dataIndex: 'orderNum', key: 'name' },
        { title: '关联方', dataIndex: 'userName', key: '1' },
        { title: '金额（元）', dataIndex: 'serviceFee', key: '2' },
        { title: '平台余额（元）', dataIndex: 'platBalance', key: '3' },
        { title: '交易类型', dataIndex: 'dealStyle', key: '4' },
        { title: '支付方式', dataIndex: 'orderPayStyle', key: '5' },
    ];
    function formatTime2(time){
        let time2 = time.toString();
        let arr = time2.split(' ');
        // console.log(arr, arr[2]);
        let mon;
        switch (arr[1]){
            case 'Aug':
                mon = '08';
                break;
            case 'Sep':
                mon = '09';
                break;
        }
        let createTime3 = arr[3]+'-'+mon+'-'+arr[2];
        return createTime3;
    }



    // 一开始列表渲染
    const [tableList, setTableList] = useState([]);
    function getList(){
        http({
            url:'/bill/detail/list',
        }).then(res =>{
            res.data && res.data.forEach(v => {
                v.dealStyle = v.dealStyle == 1?'收入':'退款';
            })
            setTableList(res.data);
        })
    }
    useEffect(() => {
        getList();
    }, [])


    // 账单明细模糊查询
    const onFinish = (values) => {
        console.log(values);
        http({
            url:'/bill/detail/see',
            data:{
                orderTime: formatTime2(values.orderTime),
                orderNum: values.orderNum,
                userName: values.userName,
                orderPayStyle: values.orderPayStyle
            }
        }).then(res => {
            console.log(res);
            setTableList(res.data);
        })
    }


    return <div className="detailCss">
        {/* 面包屑导航 */}
        <p className="breadCss">账单明细</p>
        <Breadcrumb className="breadCss2">
            <Breadcrumb.Item>对账单管理</Breadcrumb.Item>
            <Breadcrumb.Item>账单明细</Breadcrumb.Item>
        </Breadcrumb>
        <Content
            className="dD_Css"
        >
            {/* 上面的筛选行 */}
            <div className="dateRow">
                <>
                    <Form
                        layout="inline"
                        form={form}
                        size="middle"
                        onFinish={onFinish}
                    >
                        <div className="formItemBox">
                            <Form.Item label="时间" name="orderTime">
                                <DatePicker placeholder="请选择日期" />
                            </Form.Item>
                        </div>
                        <div className="formItemBox">
                            <Form.Item label="订单" name="orderNum">
                                <Input placeholder="请输入订单号" />
                            </Form.Item>
                        </div>
                        <div className="formItemBox">
                            <Form.Item label="关联方" name="userName">
                                <Input placeholder="请输入关联方" />
                            </Form.Item>
                        </div>
                        <div className="formItemBox">
                            <Form.Item label="支付方式" name="orderPayStyle">
                                <Select>
                                    <Select.Option value="微信">微信</Select.Option>
                                    <Select.Option value="支付宝">支付宝</Select.Option>
                                    <Select.Option value="免支付">免支付</Select.Option>
                                    <Select.Option value="平台">平台</Select.Option>
                                </Select>
                            </Form.Item>
                        </div>
                        <div className="formItemBox">
                            <Form.Item >
                                <Button type="primary" htmlType="submit">筛选</Button>
                            </Form.Item>
                        </div>
                    </Form>
                </>
            </div>
            {/* 表格 */}
            <div className="tableBox">
                <Table
                    columns={columns}
                    dataSource={tableList}
                    size="middle"
                    className="tableCss"
                    pagination={false}
                    rowKey="name"
                />
            </div>
            {/* 分页 */}
            <div className="pageCss">
                <>
                    <Pagination
                        showSizeChanger
                        showTotal={total => ` ${total}条记录`}
                        total={15}
                        size="small"
                        // showQuickJumper
                        itemRender={itemRender}

                    />
                </>,
            </div>
        </Content>
    </div>
}
export default observer(Detail);